<template>
    <div id="draw">
        <div class="cjyl"></div>
        <hdjsBtn></hdjsBtn>
        <hdjs v-show="hdjsvalue"></hdjs>
        <pang></pang>
        <div ref="huojianglist" class="huojianglist">
            <ul ref="huojianglistul">
                <li v-for="item in huojianglist">
                    <p>{{item.name}}</p>
                    <p>获得了</p>
                    <span>{{item.jiangping}}</span>
                </li>
            </ul>
        </div>
        <liuzi v-show="liuzivalue"></liuzi>
        <div class="zhongjiangtishi">{{zjtishi}}</div>
        <div class="zhongjiangtishi small">{{zjtishiSmall}}</div>
		<router-link v-show="backvalue" :to="{path:'/',query:{back:1}}" class="backBtn">返回首页</router-link>
    </div>
</template>

<script>
export default {
    name:'draw',
    data(){
        return{
            hdjsvalue:false,
            liuzivalue:false,
            backvalue:false,
            zjtishi:'',//天选之子！恭喜获得移动硬盘  摸摸头...与大奖擦肩而过  抱抱你...又擦肩见过
            zjtishiSmall:'',//分享朋友圈再抽一次  抽奖机会已满
            huojianglist:[{
                name:'李四',
                jiangping: '50元话费'
            },{
                name:'李四',
                jiangping: 'sssss'
            },{
                name:'李四',
                jiangping: '50元话费'
            },{
                name:'李四',
                jiangping: '50元ssss话费'
            }]
        }
    },
    methods:{
        ListRun(){
            let huojianglistul = this.$refs.huojianglistul;
            let listH = huojianglistul.offsetHeight;
            let listDivH = this.$refs.huojianglist.offsetHeight;
            let t = 0;
            if(listH>listDivH){
                setInterval(()=>{
                    t -=1;
                    huojianglistul.style.top = t+"px";
                    if(-t>listH-listDivH){t = 0;}
                },50)
            }
        },
        setzjtishi(num){
            if(num == 1){//谢谢参与
                this.zjtishi='摸摸头...与大奖擦肩而过';
                this.zjtishiSmall='分享朋友圈再抽一次';
            }else if(num == 2){//50元话费
                this.zjtishi='天选之子！恭喜获得50元话费';
            }else if(num == 3){//双肩包
                this.zjtishi='天选之子！恭喜获得双肩包';
            }else if(num == 4){//移动硬盘
                this.zjtishi='天选之子！恭喜获得移动硬盘';
            }
        }
    },
    created(){
        
    },
    mounted(){
        this.ListRun();
        if(this.$route.query.zjcx == 1){
            this.setzjtishi(sessionStorage.getItem('num'));
            this.backvalue = true;
        }
        this.center.$on("showHdjs",(value)=>{
            this.hdjsvalue = value;
        })
        this.center.$on("showLiuzi",(value)=>{
            this.liuzivalue = value;
        })
        this.center.$on("showback",(value)=>{
            this.backvalue = value;
        })
        this.center.$on("zjtishi",(num)=>{
            sessionStorage.setItem('num',num);
            this.setzjtishi(num);
        })
    }
}
</script>

<style>
#draw{
    background: url(../../static/img/swp_03.png) no-repeat;
    width: 100%;
    height: 160.8vw;
    background-size: 100%;
}
.cjyl{
	width: 43.86vw;
	height: 10.13vw;
	position: absolute;
	top: 20vw;
	left: 50%;
	margin-left: -21.67vw;
	background-image: url(../../static/img/cjyl.png);
	background-size: 43.86vw 10.13vw;
}
.huojianglist{
	position: absolute;
	top: 133.33vw;
	left: 50%;
	width: 67vw;
	height: 17.8vw;
	margin-left: -33.5vw;
	overflow: hidden;
}
.huojianglist ul{
	position: absolute;
	left: 0;
	top: 0;
}
.huojianglist ul li{
    line-height: 6vw;
    font-size: 3.2vw;
}
.huojianglist ul li p{
	display: inline-block;
	color: #fff;
}
.huojianglist ul li p:nth-child(1){
	width: 17vw;
	margin-right: 8vw;
}
.huojianglist ul li span{
	color: #ff0131;
	font-weight: bold;
}
.backBtn{
	position: absolute;
	width: 30vw;
	height: 6.66;
	background: #fff;
	color: #b01f24;
	line-height: 6.67vw;
	font-weight: 1000;
	text-align: center;
	font-size: 3.2vw;
	border-radius: 0.8vw;
	top: 124.26vw;
	left: 50%;
    margin-left: -15vw;
    text-decoration: none;
}
.zhongjiangtishi{
	width: 100%;
	height: 5.5vw;
	text-align: center;
	font-size: 4.53vw;
	color: #FFFFFF;
	font-weight: bold;
	position: absolute;
	top: 112vw;
}
.zhongjiangtishi.small{
	font-size: 1.6vw;
	transform: scale(0.7);
	position: absolute;
	top: 117.5vw;
}
</style>
